<template>
  <div style="position: relative">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin: 20px;background: #fff;min-height:90vh;padding: 20px">
      <el-tab-pane label="流程设定" name="second">
        <div>
          <div style="width: 16%;display: inline-block;vertical-align: middle;position: relative;min-height:90vh;border-right: 1px solid #666666">
            <div style="width: 200px;margin: 0 auto;position: absolute;top: 20px">
              <div @click="addspList" style="width: 100%;height: 40px;background: rgba(24,132,252,0.1);border-radius: 4px;line-height: 40px;position: relative;text-align: center;cursor: pointer">
                <img style="display: inline-block;vertical-align: center;width: 20px;position: absolute;top: 10px;left: 20px" src="../../assets/流程节点.png">
                <div style="display: inline-block;margin-left: 20px;vertical-align: center">流程节点</div>
              </div>
            </div>
          </div>
          <div style="width: 60%;display: inline-block;vertical-align: middle;text-align: center;min-height:90vh;">
            <div style="width: 200px;margin: 0 auto">
              <div style="width: 100%;height: 40px;background: rgba(24,132,252,0.1);border-radius: 4px;line-height: 40px;position: relative">
                <img style="display: inline-block;vertical-align: center;width: 20px;position: absolute;top: 10px;left: 20px" src="../../assets/抄送节点1.png">
                <div style="display: inline-block;margin-left: 20px;vertical-align: center">流程发起节点</div>

              </div>
            </div>
            <div style="width: 200px;margin: 0 auto" v-for="(item,index) in checkInfoList">
              <img src="../../assets/1_直线.png">
              <div @click="getIndex(index)" :class="checkIndex==index?'checked':'nochcek'">
                <img style="display: inline-block;vertical-align: center;width: 20px;position: absolute;top: 10px;left: 20px" src="../../assets/流程节点备份.png">
                <div style="display: inline-block;margin-left: 20px;vertical-align: center;overflow: hidden;white-space: nowrap;width: 60%">{{item.username}}</div>
              </div>
            </div>
            <div style="width: 200px;margin: 0 auto">
              <img src="../../assets/1_直线.png">
              <div style="width: 100%;height: 40px;background: rgba(24,132,252,0.1);border-radius: 4px;line-height: 40px;position: relative">
                <img style="display: inline-block;vertical-align: center;width: 20px;position: absolute;top: 10px;left: 20px" src="../../assets/流程结束.png">
                <div style="display: inline-block;margin-left: 20px;vertical-align: center">流程结束</div>

              </div>
            </div> 
          </div>
          <div style="width: 20%;display: inline-block;vertical-align: middle;min-height:90vh; ">
            <el-form>
              <h3>节点属性</h3>
              <el-form-item label="节点名称">
                <el-input v-model="checkInfoList[index].name" autocomplete="off" />
              </el-form-item>
              <el-form-item label="截止时间">
<!--                <el-input v-model="checkInfoList[index].deadline" autocomplete="off" />-->
                <el-date-picker
                    v-model="checkInfoList[index].deadline"
                    type="datetime"
                    value-format="YYYY-MM-DD h:mm:ss"
                    placeholder="选择审核截止时间"
                />
              </el-form-item>
              <el-form-item label="设置几天前提醒">
                <el-select v-model="checkInfoList[index].noticeDay" placeholder="">
                  <el-option
                      v-for="item in 10"
                      :key="item"
                      :label="item"
                      :value="item"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="负责人">
                <el-select v-model="checkInfoList[index].userId" placeholder="">
                  <el-option
                      v-for="item in userList"
                      :key="item.id"
                      :label="item.username"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
<!--      <el-tab-pane label="扩展功能" name="third">-->

<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="表单上报" name="fourth">-->

<!--      </el-tab-pane>-->

    </el-tabs>
    <el-button @click="goback" style="position: absolute;top: 20px;right: 140px" type="primary">返回</el-button>
    <el-button @click="savebg" style="position: absolute;top: 20px;right: 40px" type="primary">保存</el-button>
<!--    <el-button  @click="savefb" style="position: absolute;top: 20px;right: 130px" type="primary">上报</el-button>-->
  </div>

</template>

<script setup lang="ts">
import {h, onMounted, reactive, ref} from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { useStore } from '@/store'
const store = useStore()

import { ElMessage } from "element-plus";
const activeName = ref('second')
import {useRoute, useRouter} from "vue-router";
import {reportfindById, reportpublish, reportSave, userGetAllUser,updateCheck} from "@/util/api";
import {ElNotification} from "element-plus";
const route = useRoute()
const router = useRouter();
const templateId = ref('')
const title:any = ref('')
const folder = ref('')
const developArea = ref('')
const index:any = ref(0)
const userList:any = ref("")
const userid:any = ref('')
const checkIndex:any = ref(0)
const tabeldata:any = ref({
  list1:{
    title:'',
    templateId:'',
    listTemp:''
  }
})

const checkInfoList:any = ref([
  {
    deadline:'',
    reportId:'',
    noticeDay:'',
    reportName:'',
    sort:'',
    userId:'',
    nextUserId:'',
    name:'审批节点'
  }
])

const getIndex = (val:any) =>{
  // console.log(val)
  checkIndex.value = val
  if(index.value == val){
  }else{
    let arr = checkInfoList.value
    if(arr[index.value].name  && arr[index.value].userId){
      index.value = val
    }else{
      ElNotification({
        title: '提示',
        message: h('i', { style: 'color: teal' }, '请先将当前节点填写完成'),
      })
    }
  }
  // console.log(val)
  // console.log(checkInfoList)
}
const goback =() =>{
  router.go(-1)
}
const getuser = () =>{
  let userid1 = "?userId=" +ruleForm.data.userId
  userGetAllUser(userid1).then((res:any)=>{
    userList.value = res.data
  })
}


const addspList = () =>{
  let arr = checkInfoList.value
  if(arr[index.value].name && arr[index.value].deadline && arr[index.value].userId){
    checkInfoList.value.push({
      deadline:'',
      noticeDay:'',
      reportId:'',
      reportName:'',
      sort:'',
      userId:'',
      nextUserId:'',
      name:'',
    })
  }else{
    ElNotification({
      title: '提示',
      message: h('i', { style: 'color: teal' }, '请先将当前节点填写完成'),
    })
  }
}


const list1:any = ref({})
const list2:any = ref({})
let ruleForm:any = reactive({data:{
    name:'',
    radio1:'',
    folder:'',
    developArea:''
  },
},)
onMounted(() => {
  ruleForm.data = route.query
  templateId.value = String(ruleForm.data.radio1)
  userid.value = ruleForm.data.userid
    reportfindById(ruleForm.data.id).then((res:any)=>{
      console.log(res)
      title.value = res.data.name
      folder.value = res.data.folder
      developArea.value = res.data.developArea
      let arr = res.data
      // list1.value = arr
      list2.value = arr
      list1.value = JSON.parse(arr.info)
      if(arr.checkInfoList.length >=1){
        checkInfoList.value = arr.checkInfoList
      }
    })
  getuser()
})

const savefb = () =>{
  reportpublish(ruleForm.data.id).then((res)=>{
    router.push({
      path:"/monthReport"
    })
  })
}



const savebg = () =>{

  tabeldata.value.list1.title = title.value
  // tabeldata.value.list1.templateId = templateId.value
  let arr = checkInfoList.value
  for (let i = 0; i < arr.length; i++) {
    if(i == arr.length-1){

    }else{
      arr[i].nextUserId = arr[i +1].userId
    }
    arr[i].sort = i +1
    arr[i].reportName = title.value
  }
  if(arr[index.value].name && arr[index.value].deadline && arr[index.value].userId){
    var data:any = {
      // infoTemp:tabeldata.value.list1,
      // listTemp:tabeldata.value.list1.listTemp,
      name:title.value,
      templateId:templateId.value,
      developArea:developArea.value,
      folder:folder.value,
      checkInfoList:checkInfoList.value
    }
    console.log(data)
    updateCheck(data).then((res:any)=>{
      console.log(res)
      if(res.code=='200'){
        ElMessage.success('保存成功')
        router.push({
        path:"/monthReport"
         })
      } 
    })
    // reportSave(data).then((res:any)=>{
    //   router.push({
    //     path:"/bench"
    //   })
    // })
  }else{
    ElNotification({
      title: '提示',
      message: h('i', { style: 'color: teal' }, '请将节点信息填写完成'),
    })
    checkInfoList.value = []
  }


  // console.log(tabeldata.value.list1.listTemp)
  // if(ruleForm.data.id){
  //   var data:any = list2.value
  //   data.infoTemp = tabeldata.value.list1
  //   data.listTemp = tabeldata.value.list1.listTemp
  //   // if()
  //   data.checkInfoList = checkInfoList.value
  //   for (let i = 0; i < arr.length; i++) {
  //     arr[i].reportId = ruleForm.data.id
  //   }
  // }else{

  // console.log(data)
  // }

  // for (let i = 0; i < data.listTemp.length; i++) {
  //   if(data.listTemp[i].isYG1 == true){
  //     data.listTemp[i].isYG1 = "是"
  //   }else if(data.listTemp[i].isYG1 == false){
  //     data.listTemp[i].isYG1 = "否"
  //   }
  // }

  // console.log(data)

}


const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event)
}
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.nochcek{
  width: 100%;
  height: 40px;
  background: rgba(24,132,252,0.1);
  border-radius: 4px;
  line-height: 40px;
  position: relative;
  cursor: pointer
}
.checked{
  width: 100%;
  height: 40px;
  background: rgba(235, 76, 64, 0.1);
  border-radius: 4px;
  line-height: 40px;
  position: relative;
  cursor: pointer
}
</style>
